<template>
  <div class="store-details">
    <div class="top">
      <img :src="info.img" class="top-img" alt="">
      <div class="top-cons">
        <p class="title">{{info.title}}</p>
      </div>
    </div>
    <div class="section">
      <p class="title">联系方式</p>
      <p class="kefu tip">客服电话</p>
      <div class="tel-div">
        <p class="tel">TEL：{{info.phone}}</p>
        <p class="time">{{info.work_days}}，{{info.work_time}}</p>
        <span class="edit" @click="router({path: './editStore'})">编辑</span>
      </div>
      <p class="address tip">门店地点</p>
      <p class="address-details">{{info.address}}</p>
    </div>
    <div class="section">
      <p class="title">门店信息</p>
      <div class="cons" v-html="info.content">
      </div>
    </div>
  </div>
</template>

<script>
  import {home} from '@/api/api'
  export default {
    components: {
    },
    data () {
      return {
        info:[]
      }
    },
    created () {
      this.getHome()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      getHome() {
        home().then((res) =>{
          console.log(res.data.info)
          this.info=res.data.info
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.store-details
  width 100vw
  height 100vh
  background-color #f5f5f5
  .top
    display flex
    padding 1.5rem 2rem
    background-color #fff
    margin-bottom 1rem
    .top-img
      width 13rem
      height 10rem
      max-width 13rem
      margin-right 1.5rem
    .top-cons
      flex 1
      position relative
      .title
        color #000
        font-size 1.8rem
        font-weight 500
  .section
    margin-bottom 1rem
    background-color #fff
    padding 0 3rem
    .title
      color #000
      font-size 1.5rem
      font-weight bold
      line-height 5rem
      height 5rem
      border-bottom 1px solid #e6e6e6
      box-sizing border-box
    .tip
      font-size 1.5rem
      height 5rem
      line-height 5rem
      color #000
    .tel-div
      position relative
      border-bottom 1px solid #e6e6e6
      p
        color #666
        font-size 1.3rem
        line-height 1.3rem
        height 1.3rem
      .tel
        margin-bottom 1rem
      .time
        padding-bottom 2rem
      .edit
        position absolute
        width 6rem
        height 3rem
        line-height 3rem
        text-align center
        color #fff
        font-size 1.2rem
        font-weight 500
        top .4rem
        right 0
        background-color #172F6D
        border-radius .3rem
    .address-details
      font-size 1.3rem
      color #666
      padding-bottom 4rem      
    .cons
      img
        margin 2rem 0
      p
        font-size 1.3rem
        color #333
        margin-bottom 1rem
        line-height 2.2rem
</style>
